<script setup lang="ts">

import {onBeforeRouteUpdate,onBeforeRouteLeave} from "vue-router"

import {useRoute } from "vue-router"
import {onMounted} from "vue"

// 导入  useStore  
import {useStore} from "vuex"
let store = useStore() //vuex中的store仓库
// 修改store仓库中的状态
function add(){
    store.commit('addnum')
}




const route = useRoute()
onMounted(()=>{
    console.log(route.params)
})

// 路由离开前
onBeforeRouteLeave((to,from)=>{
    console.log('路由离开前')

})
// 路由更新  动态路由更新
// 例如 : /cars/100 ==>/cars/101
onBeforeRouteUpdate((to,from)=>{
    console.log('动态路由更新是触发')
})

</script>
<template>
   <div>
       购物车组件
       <div>vuex中的状态num:{{store.state.num}}</div>
       <button @click="add">store中num++</button>
   </div>
</template>